<template>
    <div class="select-scene">
        <el-dialog title="规格选择" :visible.sync="show" :modal="false" width="80%">
            <el-table :data="tableData.columnData" highlight-current-row @selection-change="handleSelectionChange">
                <el-table-column property="name" label="规格名称" min-width="200" align="left"></el-table-column>
                <el-table-column property="marketPrice" label="价格" width="120" align="center"></el-table-column>
                <el-table-column property="storeNums" label="库存" align="center" width="120"></el-table-column>
                <el-table-column type="selection" width="80" align="center"></el-table-column>
            </el-table>
            <div slot="footer">
                <el-button type="primary" @click="submitchoosed">确定</el-button>
                <el-button @click="closeDialog">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {
        queryGoodsList
    } from '@/pages/product/service/productService.js';
    import {
        isArray
    } from '@/utils/Tools';
    export default {
        name: '', // 场景选择组件（弹窗）
        props: {
            multiple: {
                type: Boolean,
                default: false,
            },
            hasInput: { // 是否带输入框
                type: Boolean,
                default: false
            },
            productData: {
                type: Array
            },
            placeholder: {
                type: String,
                default: '请选择'
            }
        },
        components: {},
        data() {
            return {
                show: false,
                title: '选择商品',
                label: '', // 输入框绑定值
                tableData: {
                    currentPage: 1,
                    pageSize: 15,
                    total: 0,
                    columnData: [],
                },
                selection: [],
                loading: false,
            }
        },
        methods: {
            showDialog() {
                this.show = true;
                this.clickQuery();
            },
            closeDialog() {
                this.show = false;
            },
            clickQuery() {
                this.tableData.currentPage = 1;
                this.queryListFun();
            },
            queryListFun() { // 查询分类下的场景
                let params = {
                    rowSize: this.tableData.pageSize,
                    startRow: this.tableData.currentPage
                }
                this.loading = true;
                queryGoodsList(params).then(res => {
                    this.tableData.columnData.splice(0, this.tableData.columnData.length);
                    if (res.data.code == 1000) {
                        let data = res.data.data;
                        if (isArray(data.data) && data.data.length) {
                            // this.tableData.columnData.push(...data.data);
                            this.tableData.columnData = data.data.map((i) => {
                                return {
                                    ...i,
                                    choosed: false
                                }
                            })
                            this.productData.forEach((k) => {
                                for (let i = 0; i < this.tableData.columnData.length; i++) {
                                    if (k.id == this.tableData.columnData[i].id) {
                                        this.tableData.columnData[i].choosed = true
                                    }

                                }
                            })
                            this.tableData.total = data.total;
                        } else {
                            this.tableData.total = 0;
                        }
                    }
                    this.loading = false;
                }).catch(error => {
                    this.loading = false;
                })
            },
            handleSelectionChange(val) {
                this.selection = val;
            },
            submitchoosed() {
                this.$emit('update:ruleData', this.selection);
                this.closeDialog();
            },
            unselectThis(row) {
                row.choosed = false
                this.selection.splice(row.$index, 1)
            }
        }
    }

</script>

<style lang="scss" scoped>
    .select-scene {
        // display: inline-block;
        vertical-align: middle;
        // float: left;
    }

    .input-wrap {
        position: relative;
        height: 35px;
        line-height: 35px;

        /deep/ {
            .el-input {
                float: left;
            }

            .del-icon {
                position: absolute;
                top: 8px;
                right: 10px;
                cursor: pointer;
            }
        }
    }

</style>
<style lang="scss">
    .el-dialog__body {
        padding: 15px 20px 30px 20px;
    }

</style>
